<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h1>The Activity Page</h1>
    <table class="table">
        <thead>
        <tr>
            <th>title</th>
            <th>Category</th>
            <th>StartTime</th>
            <th>EndTime</th>
            <th>State</th>
        </tr>
        </thead>
        <tbody id="tbodyId">
        <tr><td colspan="6">数据正在加载中.......</td></tr>
        </tbody>
    </table>

</div>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script>
    function doFindActivitys(){
        let url="/activity/doFindActivitys";
        $.getJSON(url,function(result){//[{},{},{},...]
            var tBody=$("#tbodyId");
            tBody.empty();
            result.forEach((item)=>{
                tBody.append(`<tr>
                                    <td>${item.title}</td>
                                    <td>${item.category}</td>
                                    <td>${item.startTime}</td>
                                    <td>${item.endTime}</td>
                                    <td>${item.state}</td>
                                  </tr>`);
            });

        })
    }
    doFindActivitys();
</script>
</body>
</body>
</html>